<template>
  <div class="postIndex">
    <!-- 左侧 -->
    <PostCity :cityTravel="cityTravel" />
    <!-- <PostCity :cityTravel="postsList" /> -->
    <!-- 右侧 -->
    <div class="right">
      <div class="right_top">
        <div class="search">
          <input id="searchText" type="text" placeholder="请输入想去的地方，比如：'广州'" />
          <span @click="searchCity()" class="iconfont icon-sousuo"></span>
        </div>
        <div class="serch_bottom">
          推荐:
          <div class="search_city">
            <span
              v-for="(item,index) in cityList"
              :key="index"
              @click="getPosts(item.city)"
            >{{item.city}}</span>
          </div>
        </div>
      </div>
      <!-- 推荐攻略 -->
      <div class="header">
        <div class="tuijian">推荐攻略</div>
        <!-- 跳转到写游记页面 -->
        <nuxt-link to="/post/create">
          <div class="writePost">
            <span class="iconfont icon-pinglun1"></span>写游记
          </div>
        </nuxt-link>
      </div>
      <!-- 文章组件 绑定分页渲染的数据-->
      <PostsList v-for="(item,index) in postsPage" :key="index" :item="item" />
      <!-- 分页 -->
      <div class="block" style="margin:20px 0;text-align: center;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[3, 5, 10, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <!-- 让postList改变 触发computed中的方法 -->
      <span v-show="false">{{postList}}</span>
    </div>
  </div>
</template>

<script>
import PostCity from "@/components/post/postCity";
import PostsList from "@/components/post/postsList";
export default {
  components: {
    PostCity,
    PostsList
  },
  data() {
    return {
      postList: [],
      // 存放左边推荐城市列表
      cityTravel: [],
      // 分页默认值
      pageIndex: 1, //当前页码
      pageSize: 3, //每页容量
      total: 0, //总条数
      // 存放路由参数query
      query: [{ city: "" }],
      cityList: [{ city: "广州" }, { city: "上海" }, { city: "北京" }]
    };
  },
  mounted() {
    // 加载左侧栏
    this.$axios({
      url: "/posts/cities"
    }).then(res => {
      console.log(res);
      const { data } = res.data;
      this.cityTravel = data;
    });
    this.getPostList(this.$route.query);
  },
  computed: {
    // 保存当前分页要渲染的数据
    postsPage() {
      // postList 当页面加载时触发 一开始我们在页面渲染
      const arr = this.postList.slice(
        (this.pageIndex - 1) * this.pageSize,
        this.pageIndex * this.pageSize
      );
      return arr;
    }
  },
  // 监听路由变化 当组件被复用时调用这个路由守卫
  // 组件内路由守卫
  async beforeRouteUpdate(to, from, next) {
    // await后要接一个promise才有意义 我们要return一个promise
    //传参 根据参数跳转
    await this.getPostList(to.query);
    // 获取列表之后再异步请求next
    next();
  },
  methods: {
    // 加载首页文章的方法
    getPostList(query) {
      return this.$axios({
        url: "/posts",
        params: query
      }).then(res => {
        console.log(res);
        const { data } = res.data;
        this.postList = data;
        this.total = data.length;
        // console.log(query, "query");
        this.query = query;
        // 选中城市有参数
        if (this.query.city!==undefined) {
          let inputVal = document.querySelector("#searchText");
          // 输入框value值为city
          inputVal.value = this.query.city;
        }
      });
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 当前是第几页
    handleCurrentChange(val) {
      this.pageIndex = val;
    },
    // 切换城市方法
    getPosts(city) {
      this.$router.push({
        path: "/post",
        query: { city }
      });
    },
    // 点击搜索按钮 调用getPosts方法
    searchCity() {
      // 获取input输入框
      let val = document.querySelector("#searchText");
      // 将input输入框的值传入
      this.getPosts(val.value);
    }
  }
};
</script>

<style lang="less" scoped>
.postIndex {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  .right {
    width: 700px;
    margin-left: 30px;
    .right_top {
      .search {
        display: flex;
        width: 100%;
        border: 2px solid orange;
        height: 40px;
        padding: 0 20px;
        box-sizing: border-box;
        input {
          flex: 1;
          outline: none;
          border: none;
        }
        span {
          color: orange;
          font-weight: bold;
        }
      }
      .serch_bottom {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        font-size: 12px;
        color: #666;
        padding: 10px 0;
        .search_city {
          flex: 1;
          margin-left: 10px;
          span {
            margin-right: 10px;
          }
          span:hover {
            border-bottom: 1px solid orange;
            color: orange;
          }
        }
      }
    }
  }
  // 推荐攻略
  .header {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #ccc;
    justify-content: space-between;
    .tuijian {
      font-size: 20px;
      color: orange;
      border-bottom: 2px solid orange;
      padding-bottom: 20px;
    }
    .writePost {
      background: #409eff;
      border-radius: 5px;
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 14px;
      color: #fff;
    }
  }
}
</style>